<template>
  <div class="container">
    <div class="title" >
      <span>{{ title }}</span>
      <span class="back" @click="back"> <i class="iconfont icon-fanhui"></i> 返回 </span>
    </div>
    <el-form label-position="left" label-width="100px" :model="myData" class="demo-form-inline">
      <el-form-item label="职位名称" prop="jobName">
        <el-input v-model="myData.jobName" placeholder="职位名称"></el-input>
      </el-form-item>
      <el-form-item label="所属部门" prop="deptId">
        <el-select style="width: 100%" filterable v-model="myData.deptId" placeholder="请填写职位名称">
          <el-option v-for="item in getDictiteList10" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职位性质" prop="nature">
        <el-radio-group v-model="myData.nature">
          <el-radio :label="0">兼职</el-radio>
          <el-radio :label="1">全职</el-radio>
          <el-radio :label="2">实习</el-radio>
          <el-radio :label="3">其他</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="期望薪资">
        <el-col :span="10">
          <el-input
            type="text"
            @input="integerFn"
            maxlength="3"
            placeholder="最低薪资"
            v-model="myData.minSalary"
            style="width: 100%"
          ></el-input>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="10">
          <el-input
            type="text"
            @input="integerFn"
            maxlength="3"
            placeholder="最高薪资"
            v-model="myData.maxSalary"
            style="width: 100%"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="职位类别" prop="type">
          <el-select  style="width: 100%" filterable v-model="myData.type" placeholder="请填写职位类别">
          <el-option v-for="item in getDictiteList10" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工作地点" prop="address">
        <el-input v-model="myData.address" placeholder="请填写工作地点"></el-input>
      </el-form-item>
      <el-form-item label="招聘人数" prop="headCount">
        <el-input v-model="myData.headCount" placeholder="请填写招聘人数"></el-input>
      </el-form-item>
      <el-form-item label="优先级" prop="priority">
        <el-input v-model="myData.priority" placeholder="请填写优先级"></el-input>
      </el-form-item>
      <el-form-item label="职位负责人" prop="leader">
        <el-input v-model="myData.leader" placeholder="请填写职位负责人"></el-input>
      </el-form-item>
      <el-form-item label="职业级别" prop="level">
        <el-select style="width: 100%" filterable v-model="myData.level" placeholder="请填写职业级别">
          <el-option v-for="item in getDictiteList3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="需求编号" prop="reqId">
        <el-input type="text" placeholder="请输入需求编号" v-model="myData.reqId"> </el-input>
      </el-form-item>
      <el-form-item label="职位状态" prop="jobStat">
        <!-- <el-input type="text" placeholder="请输入职位状态" v-model="myData.jobStat"> </el-input> -->
              <el-select style="width: 100%" size="medium" clearable filterable v-model="myData.jobStat" placeholder="请选择">
            <el-option
              v-for="item in statuList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
      </el-form-item>
      <!-- <el-form-item label="备注" prop="summary">
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 8 }"
          placeholder="请输入简介"
          v-model="myData.summary"
        >
        </el-input>
      </el-form-item> -->
      <el-form-item class="submit">
        <el-button type="primary" @click="submitForm">提 交</el-button>
        <el-button type="danger" @click="submitForm">关 闭</el-button>
        <el-button @click="resetForm11">重 置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive, ref, onMounted } from 'vue'
// import { ElMessage } from 'element-plus'
import positionModel from '@/model/position'
import toolModel from '@/model/tool'
export default {
    props: {
    editData: {
      type: Object,
      default:  {
        jobName:"",
        deptName:"",
        nature:"",
        minSalary:"",
        maxSalary:"",
        type:"",
        headCount:"",
        priority:"",
        leader:"",
        level:"",
        reqId:"",
        jobStat:"",
      }
    },
    title: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      dictiteList: {
        1: '性别',
        2: '候选人状态',
        3: '职位级别',
        4: '学历要求',
        5: '职位渠道',
        6: '职位性质',
        7: '优先级',
        8: '职位来源',
        9: '工作经验',
      },
      myData: {
        jobId:'',
        deptId:'',
        nature:'',
        minSalary:'',
        maxSalary:'',
        type:'',
        address:'',
        headCount:'',
        priority:'',
        level:'',
        reqId:'',
        jobStat:'',
      },
      getDictiteList3:[],
      getDictiteList10:[],
      statuList:[{label:'开启',value:1},{label:'关闭',value:0}],

    }
  },
  methods: {
    resetForm11(formName) {
      console.log(formName, 1212, this.$refs.editDataFrom)
      // this.myData
      this.$refs.editDataFrom.resetFields()
    },
    submitForm() {
      this.positionAdd(this.myData)
      return
      this.$refs.editDataFrom.validate(async valid => {
        if (valid) {
          let res = {}
          if (this.editpositionId) {
            ElMessage.success('提交成功')
            this.back()
          } else {
            // res = await positionModel.createposition( this.myData)
            ElMessage.success('提交成功')
            this.resetForm11(formName)
          }
          if (res.code < window.MAX_SUCCESS_CODE) {
            ElMessage.success(`${res.message}`)
          }
          ElMessage.success('提交成功')
        } else {
          console.error('error submit!!')
          ElMessage.error('请将信息填写完整')
        }
      })
    },
    async positionAdd(params){
      var that = this
      console.log(that.editData,'params');
      let res = positionModel.positionAdd(params)
      if(res.code == 200 ){
        console.log(res,'res200');
        that.myData = res.data.data
      }
    },
    integerFn(e) {
      let reg = /[1-9]{1}[0-9]*$/
      let strArray = e.split('')
      let newStrs = ''
      for (let i = 0; i < strArray.length; i++) {
        if (reg.test(strArray[i])) {
          newStrs += strArray[i]
        } else if (i > 0 && strArray[i] === '0') {
          newStrs += strArray[i]
        }
      }
      if (newStrs - 0 > 0) {
        this.myData.num1 = newStrs - 0
        //  return newStrs - 0;
      } else {
        this.myData.num1 = ''
        //  return "";
      }
    },
    async dictitem(data) {
      const res = await toolModel.dictitem(data)
      const allData = [...res.data]
      let dictitemMapList = allData.reduce((memo, current) => {
        memo[current['dictId']] = current
        return memo
      }, {})
      console.log(res,dictitemMapList, 909)
    },
    async init(){
      var that = this
      //获取详情
      // that.myData = that.editData.row
      console.log(this.editData.row,'row');
      if(that.editData.row) {
        let result  = JSON.parse(JSON.stringify(that.editData.row))
        if(result.jobStat){
          result.jobStat = 1
        }else{
          result.jobStat = 0
        }
          that.myData = {
            jobName:result.jobName,
            jobId:result.jobId,
            deptId:result.deptId,
            nature:result.nature,
            minSalary:result.minSalary,
            maxSalary:result.maxSalary,
            type:result.type,
            address:result.address,
            headCount:result.headCount,
            priority:result.priority,
            level:result.level,
            reqId:result.reqId,
            jobStat:result.jobStat,
          }
      }
      console.log(that.myData,'7878787');
      this.getDictiteList3 = await this.getDictiteList(3)
      this.getDictiteList10 = await this.getDictiteList(10)
    
    },
    async getDictiteList(dictId) {
      var that = this
      const res = await toolModel.dictitem({
        dictId: dictId,
      })
      const allData = res.data
      const result = []
      allData.map(ele => {
        result.push({
          value: ele.itemValue,
          label: ele.itemText,
        })
      })
      console.log(result, '字典',dictId)
      return result
    },
    back() {
      this.$emit('editClose')
    },
  },
  mounted() {
    this.init()
    //获取字典
    this.dictitem({
    })
  },
  components: {},
}

/**
 * 表单验证规则
 */
function getRules() {
  /**
   * 验证回调函数
   */
  const checkInfo = (rule, value, callback) => {
    console.log(value, 99999)
    if (!value) {
      callback(new Error('信息不能为空'))
    }
    callback()
  }
  const rules = {
    // 是否必填
    name: [{ validator: checkInfo, trigger: 'blur', required: true }],
    position: [{ validator: checkInfo, trigger: 'blur', required: true }],
    summary: [{ validator: checkInfo, trigger: 'blur', required: true }],
    occupational: [{ validator: checkInfo, trigger: 'blur', required: true }],
    education: [{ validator: checkInfo, trigger: 'blur', required: true }],
    background: [{ validator: checkInfo, trigger: 'blur', required: true }],
    maxSalary: [{ validator: checkInfo, trigger: 'blur', required: true }],
    num2: [{ validator: checkInfo, trigger: 'blur', required: true }],
    leader: [{ validator: checkInfo, trigger: 'blur', required: true }],
    level: [{ validator: checkInfo, trigger: 'blur', required: true }],
    num3: [{ validator: checkInfo, trigger: 'blur', required: true }],
    num1: [{ validator: checkInfo, trigger: 'blur', required: true }],
    positionState: [{ validator: checkInfo, trigger: 'blur', required: true }],
  }
  return { rules }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 30px;
  .demo-form-inline {
    padding: 20px;
    width: 50%;
  }
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;
    border-bottom: 1px solid #dae1ec;
    .back {
      float: right;
      margin-right: 40px;
      cursor: pointer;
    }
  }

  .wrap {
    padding: 20px;
  }

  .submit {
    float: left;
  }

  .count {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .line {
    text-align: center;
  }
}
</style>
